<template>
    <n-modal
        v-model:show="showModal"
        class="custom-card"
        preset="card"
        size="huge"
        :style="bodyStyle"
        :segmented="segmented"
        :bordered="false"
    >
        <div class="vue-flow-modal">
            <vue-flow-canvas :data="data" :operable="false" style="height: 68vh"/>
        </div>
    </n-modal>
</template>

<script setup>
import workApi from "@/http/workApi";
import VueFlowCanvas from "@/components/VueFlowModel/Compositions/VueFlowCanvas.vue";

const segmented = {
    content: "soft",
    footer: "soft"
}
const bodyStyle = {
    width: "80vw",
    height: "80vh"
}
const showModal = ref(false)
const data = ref([])

function open(training_id, task_id) {
    if (!training_id || !task_id) {
        return
    }
    workApi.get("student/student_task_perform_flowchart", {
        params: {
            task_id,
            training_id,
        }
    }).then(r => {
        data.value = r.data
        showModal.value = true
    });
}

defineExpose({
    open
})
</script>

<style scoped lang="less">
.topic {
    margin-bottom: 20px;

    .title {
    }

    .option {
        margin: 3px 18px;
    }

    .answer {
        margin-top: 10px;
    }
}
</style>